html - Keep optimal width of an element using CSS -

I have to make sure that an HTML element (an input box in this case) is 'optimal' on different screen resolutions Keeps the width.

My subjective rule (for simplicity: ignoring the requirement of margins):

1. Set the width of the set initially to 40% Width of the window
2. If the size of the element goes below the fixed width (such as 200 pixels), then keep the minimum width
3. If the elements will not fit on the screen (in this example : Window width is small, 200 pixels), set the width of the element to width in the window

   Is it Pure CSS (and still IE8 support) can be achieved?

   As others have said, you can use media queries, for your needs here There is an example.

     Input {width: 40%; Minimum-width: 200px; } @ Media (max-width: 200 px) {Input {width: 100%; Minimum width: 0; }}